<!-- 系统设置板块 -- 协议文本设置页面 -->
<template>
  <div>
    <el-tabs type="border-card" style="width:60%" @tab-click="handleClick">

      <el-tab-pane label="押金说明">
        <r-tinymce v-model="value1"></r-tinymce>
        <!-- <Tinymce :value="value1" v-model="value1" v-if="activeName=='押金说明'&&activeShow"></Tinymce> -->
        <div class="tac mt20">
          <el-button @click="submit(1)" type="primary">保存</el-button>
        </div>
      </el-tab-pane>
      <el-tab-pane label="用户协议">
        <r-tinymce v-model="value2"></r-tinymce>
        <!-- <Tinymce :value="value2" v-if="activeName=='用户协议'&&activeShow"></Tinymce> -->
        <div class="tac mt20">
          <el-button @click="submit(2)" type="primary">保存</el-button>
        </div>
      </el-tab-pane>
      <el-tab-pane label="充值协议">
        <r-tinymce v-model="value3"></r-tinymce>
        <!-- <Tinymce :value="value3" v-if="activeName=='充值协议'&&activeShow"></Tinymce> -->
        <div class="tac mt20">
          <el-button @click="submit(3)" type="primary">保存</el-button>
        </div>
      </el-tab-pane>
      <el-tab-pane label="隐私协议">
        <r-tinymce v-model="value4"></r-tinymce>
        <!-- <Tinymce :value="value4" v-if="activeName=='隐私协议'&&activeShow"></Tinymce> -->
        <div class="tac mt20">
          <el-button @click="submit(4)" type="primary">保存</el-button>
        </div>
      </el-tab-pane>
      <el-tab-pane label="用户指南">
        <r-tinymce v-model="value5"></r-tinymce>
        <!-- <Tinymce :value="value5" v-model="value5" v-if="activeName=='用户指南'&&activeShow"></Tinymce> -->
        <div class="tac mt20">
          <el-button @click="submit(5)" type="primary">保存</el-button>
        </div>
      </el-tab-pane>
      <el-tab-pane label="关于我们">
        <r-tinymce v-model="value6"></r-tinymce>
        <!-- <Tinymce :value="value6" v-model="value6" v-if="activeName=='关于我们'&&activeShow"></Tinymce> -->
        <div class="tac mt20">
          <el-button @click="submit(6)" type="primary">保存</el-button>
        </div>
      </el-tab-pane>
    </el-tabs>

  </div>
</template>

<script>
// import Tinymce from "@/components/Tinymce/index.vue";
export default {
  name: "platform_information",
  components: {
    // Tinymce
  },
  data() {
    return {
      value1: '请输入押金说明...',
      value2: '请输入用户协议...',
      value3: '请输入充值协议...',
      value4: '请输入隐私协议...',
      value5: '请输入用户指南...',
      value6: '请输入关于我们...',
      activeName: '押金说明',
      activeShow: false
    }
  },
  mounted() {
    this.getData();
    this.$nextTick(() => this.activeShow = true)
  },
  methods: {
    handleClick(tab, event) {
      this.activeName = tab.label
      this.activeShow = false
      this.$nextTick(() => this.activeShow = true)
    },
    async getData() {
      const res1 = await this.apis.protocolGuide_getInfo({
        type: 1
      });

      this.value1 = res1.data.content;
      const res2 = await this.apis.protocolGuide_getInfo({
        type: 2
      });

      this.value2 = res2.data.content;
      const res3 = await this.apis.protocolGuide_getInfo({
        type: 3
      });

      this.value3 = res3.data.content;

      const res4 = await this.apis.protocolGuide_getInfo({
        type: 4
      });

      this.value4 = res4.data.content;

      const res5 = await this.apis.protocolGuide_getInfo({
        type: 5
      });

      this.value5 = res5.data.content;

      const res6 = await this.apis.protocolGuide_getInfo({
        type: 6
      });

      this.value6 = res6.data.content;

    },
    async submit(type) {
      const res = await this.apis.protocolGuide_saveOrUpdate({
        type: type,
        content: this['value' + type]
      });
      this.$message({
        message: '操作成功！',
        type: 'success'
      });

    }

  }
}
</script>

<style scoped lang="scss">
</style>
